.container{
  border: 1px solid red;
  width: 100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .child1{
    border: 1px solid red;
    width: 90vw;
    height:90vh;
    display: flex;
    .child2{
      border: 1px solid blue;
      width: 10%;
    }
    .child3{
      border: 1px solid blue;
      width: 90%;
      display: flex;
      flex-direction: column;
      .child3header{
        background-color:aquamarine;
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: space-evenly;
        .child3header1{
          position: relative;
          background-color: red;
          width: 40%;
          box-sizing: border-box;
          display: flex;
          .child3header1_1{
            background-color: rosybrown;
            width: 40%;
            height: 40%;
          }
          .child3header1_2{
            background-color:indigo;
            width: 40%;
            height: 40%;
          }
          // 父亲设置了flex布局才有效果
          &::before{
            margin-left: 15px;
            margin-right:15px;
            // position: relative;
            content: '';
            width: 1px;
            height: 11px;
            background:wheat;
          }
          &::after {
            background:wheat;
            content: '';
            position: absolute;
            top: 40%;
            left: 10%;
            width: 0;
            height: 0;
            border-top: 10px solid blue;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }
        .child3header2{
          background-color: goldenrod;
          width: 40%;
        }
      }
      .child3conenxt{
        background-color: aqua;
        width: 100%;
        height: 80%;
        transition: all 0.6s ease-in-out; //设置位移时的效果
        &.move{
          transform: translateX(100%); //位移
        }
      }
    }
  }
}